<template>
  <div class="tip">
    <h1 class="big-title">欢迎来到网增聊天机器人首页</h1>
    <div class="tip-container">
      <p class="title">机器人全新版本重磅来袭！！！</p>
      <p class="content">新版安装教程、使用疑问请移步微信随时沟通！</p>
    </div>
  </div>
  <div id="container">
    <h2>网增聊天机器人下载</h2>
    <a class="download-link"  @click="()=>popup_windows = true" id="windows-link" href="#">Windows 版本(推荐)</a>
    <a class="download-link"  @click="()=>popup_apple = true" id="apple-link" href="#">Apple M 系列芯片版本</a>
    <a class="download-link"  @click="()=>popup_intel = true" id="intel-link" href="#">Apple Intel 版本</a>
  </div>
  <div class="bottom">
    <div class="textBox">
      <p>注：查看苹果电脑芯片方法：</p>
      <p>1. 打开苹果菜单，选择“关于本机”。</p>
      <p>2. 在出现的对话框中，你可以看到Mac的概览信息，包括操作系统、内存、处理器等。</p>
      <p>在这里，你可以找到标记为“处理器”或“芯片”的信息，这就是你的Mac所使用的芯片。</p>
      <div>
        <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备2024161278号</a>
      </div>
    </div>
  </div>
  <div id="popup-windows" class="popup" v-show="popup_windows">
    <h2>1、下载RPA</h2>
    <p>
      <a class="download-link" id="windows-link-rpa" href="http://resources.mvpzm.com/robot/Robot.exe">点击下载</a>
      <a class="download-link2" style="font-size: 14px;color: #1f7bdb;float: right;"
        href="http://cdn.mvpzm.com/robot/package/Robot.zip">异常情况补充文件</a>
    </p>
    <div class="close" id="close-windows" @click="()=>popup_windows = false">关闭</div>
  </div>
  <!--appleM-->
  <div id="popup-apple" class="popup" v-show="popup_apple">
    <h7>请按照如下步骤依次操作：</h7>
    <h2>1、安装JDK</h2>
    <p><a class="download-link" id="windows-link-apple-jdk" href="http://120.79.99.33/jdk8_arm">点击下载</a></p>
    <h2>2、安装RPA</h2>
    <p><a class="download-link" id="windows-link-apple-rpa"
        href="http://cdn.mvpzm.com/robot/package/robot-arm.dmg">点击下载</a></p>
    <div class="close" id="close-windows-apple" @click="()=>popup_apple = false">关闭</div>
  </div>
  <!--intel-->
  <div id="popup-intel" class="popup" v-show="popup_intel">
    <h7>请按照如下步骤依次操作：</h7>
    <h2>1、安装JDK</h2>
    <p><a class="download-link" id="windows-link-intel-jdk" href="http://120.79.99.33/jdk8_intel">点击下载</a></p>
    <h2>2、安装RPA</h2>
    <p><a class="download-link" id="windows-link-intel-rpa"
        href="http://cdn.mvpzm.com/robot/package/robot-intel.dmg">点击下载</a></p>
    <div class="close" id="close-windows-intel" @click="()=>popup_intel = false">关闭</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const popup_windows = ref(false)
const popup_apple = ref(false)
const popup_intel = ref(false)

// document.getElementById('apple-link').addEventListener('click', function () {
//   const popup = document.getElementById("popup-apple");
//   popup.style.display = "block";
// });

// document.getElementById('intel-link').addEventListener('click', function () {
//   const popup = document.getElementById("popup-intel");
//   popup.style.display = "block";
// });
// document.getElementById('windows-link').addEventListener('click', function () {
//   const popup = document.getElementById("popup-windows");
//   popup.style.display = "block";
// });
</script>

<style scoped>
#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

p,h1,h2 {
  color: #333;
}

.download-link {
  display: block;
  margin: 10px 0;
  padding: 10px 20px;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  background-color: #4285f4;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  width: 180px;
}

.download-link:hover {
  background-color: #3c79de;
}

.tip {
  text-align: left;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-title {
  font-size: 28px;
}

.tip-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 6px solid #3894ff;
  padding: 20px;
  border-radius: 20px;
}

.title {
  font-size: 18px;
  font-weight: 600;
}

.content {
  font-size: 16px;
}

.popup {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 20px;
  cursor: pointer;
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.bottom {
  position: absolute;
  bottom: 20px;
  text-align: left;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bottom p {
  margin: 0;
}
#popup-windows p
,#popup-apple p 
,#popup-intel p{
    text-align: center;
    display: inline-block;
    margin:0
}

#popup-windows h2
,#popup-apple h2 
,#popup-intel h2{
    text-align: left;
    display: inline-block;
    margin:10px;
    width:100%;
}
</style>
